<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="/css/more.css"/>
    <script src="/js/vue.global-3.2.45.js"></script>
    <script src="/js/axios-1.2.1.js"></script>
    <title>后台 | 外卖配送信息系统</title>
</head>

<body>
<div class="Page" id="page-app">
    <br/>
    <div class="text-center">
        <h1>欢迎来到外卖信息配送系统</h1>
        <span id="time" style="float: left">{{ time }}</span>
        <div style="float: right">
            姓名: <span id="name">{{ basicInfo.name }}</span>
            <span>&nbsp;&nbsp;</span>
            身份: <span id="type">{{ basicInfo.type }}</span>
            <span>&nbsp;&nbsp;</span>
            电话: <span id="phone">{{ basicInfo.phone }}</span>
            <span>&nbsp;&nbsp;</span>
            <a href="/change">修改资料</a>
            <span>&nbsp;&nbsp;</span>
            <a href="/quit">退出登录</a>
        </div>
    </div>
    <br/>
    <hr>

    <div class="More" id="showLive">
        <span id="liveBlock">所在区域：{{ basicInfo.groupName }}</span>
        <span>&nbsp;&nbsp;&nbsp;</span>
        <span id="liveGroup">所在组别：{{ basicInfo.blockName }}</span>
        <br/><br/>
        <label id="batchDelete">
            <input type="button" value="" @click="deleteIt"
                   style="background: url(/img/delete.png);background-repeat: no-repeat;width: 33px;height: 33px"/>
        </label>
        <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
        <a href="/more">
            <img src="/img/more.png" alt="more">
        </a>
        <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
        <label id="batchSend" v-show="selectInfo.type === 'takeaway'">
            <input type="button" value="" @click="sendTakeaway"
                   style="background: url(/img/arrival.png);background-repeat: no-repeat;width: 33px;height: 33px"/>
        </label>
    </div>

    <br/>

    <div class="showView" id="showView">
        <label id="selectBlock">区域：
            <select @change="changeGroupSelect" v-model="selectInfo.blockName">
                <option value="null"></option>
                <option v-for="blockName in basicInfo.blocks" :value="blockName" :key="blockName">{{ blockName }}
                </option>
            </select>
        </label>
        <label id="selectGroup">组别：
            <select v-model="selectInfo.groupName">
                <option value="null"></option>
                <option v-for="groupName in basicInfo.groups" :value="groupName" :key="groupName">{{ groupName }}
                </option>
            </select>
        </label>
        <label id="selectType" @change="changeTypeSelect">类型：
            <select v-model="selectInfo.type">
                <option value="takeaway">外卖</option>
                <option value="admin" id="adminTypeOption">管理员</option>
                <option value="sender">配送员</option>
                <option value="block" id="blockTypeOption">区域</option>
                <option value="group" id="groupTypeOption">组别</option>
            </select>
        </label>
        <label>搜索：
            <input type="text" id="searchKeyword" width="150px" v-model="selectInfo.keyword"/>
        </label>
        <label>
            <input type="button" value="" @click="getData"
                   style="background: url(/img/search.png);background-repeat: no-repeat;width: 23px;height: 23px"/>
        </label>

    </div>

    <br/>

    <div id="showData">
        <table v-show="selectInfo.type === 'takeaway'">
            <tr>
                <th>收货人</th>
                <th>收货号码</th>
                <th>区域</th>
                <th>组别</th>
                <th>配送时间</th>
                <th>配送员号码</th>
                <th>配送状态</th>
                <th>备注</th>
                <th>选择</th>
            </tr>
            <tr v-for="e in tableData">
                <td>{{ e.userName }}</td>
                <td>{{ e.phone }}</td>
                <td>{{ e.blockName }}</td>
                <td>{{ e.groupName }}</td>
                <td>{{ e.time }}</td>
                <td>{{ e.senderPhone }}</td>
                <td>{{ e.status }}</td>
                <td>{{ e.detail }}</td>
                <td><label>
                    <input type="checkbox" v-model="selectedItem" :value="e.id"/>
                </label></td>
            </tr>
        </table>
        <table v-show="selectInfo.type === 'sender'">
            <tr>
                <th>配送员</th>
                <th>手机号码</th>
                <th>区域</th>
                <th>组别</th>
                <th>选择</th>
            </tr>
            <tr v-for="e in tableData">
                <td>{{ e.name }}</td>
                <td>{{ e.phone }}</td>
                <td>{{ e.blockName }}</td>
                <td>{{ e.groupName }}</td>
                <td><label>
                    <input type="checkbox" v-model="selectedItem" :value="e.id"/>
                </label></td>
            </tr>
        </table>
        <table v-show="selectInfo.type === 'admin'">
            <tr>
                <th>管理员</th>
                <th>手机号码</th>
                <th>区域</th>
                <th>选择</th>
            </tr>
            <tr v-for="e in tableData">
                <td>{{ e.name }}</td>
                <td>{{ e.phone }}</td>
                <td>{{ e.blockName }}</td>
                <td><label>
                    <input type="checkbox" v-model="selectedItem" :value="e.id"/>
                </label></td>
            </tr>
        </table>
        <table v-show="selectInfo.type === 'group'">
            <tr>
                <th>名称</th>
                <th>区域</th>
                <th>详细</th>
                <th>选择</th>
            </tr>
            <tr v-for="e in tableData">
                <td>{{ e.groupName }}</td>
                <td>{{ e.blockName }}</td>
                <td>{{ e.info }}</td>
                <td><label>
                    <input type="checkbox" v-model="selectedItem" :value="e.id"/>
                </label></td>
            </tr>
        </table>
        <table v-show="selectInfo.type === 'block'">
            <tr>
                <th>名称</th>
                <th>详细</th>
                <th>选择</th>
            </tr>
            <tr v-for="e in tableData">
                <td>{{ e.blockName }}</td>
                <td>{{ e.info }}</td>
                <td><label>
                    <input type="checkbox" v-model="selectedItem" :value="e.id"/>
                </label></td>
            </tr>
        </table>
    </div>


</div>
</body>
<script type="text/javascript" src="/js/page.js"></script>
</html>
